import React, {memo, useEffect, useRef, useState} from "react";
import {WELLS_COLUMN, WELLS_ROW} from "../../pages/main/plate/config";
import {useSelector} from "react-redux";

import "./index.css";
import {WELL_TYPE} from "../../pages/main/store/constants";

export default memo(function QcTable(props) {
  const wellsContainer = useRef();  //  Wells容器
  const {data, analysisShowLineArr} = useSelector(state => ({
    data: state.dataReducer.data,
    analysisShowLineArr: state.plateReducer.analysisShowLineArr  //  包含可以画线的well(同时有target和sampleName)
  }));
  const [fail, setFail] = useState([]);
  useEffect(() => {
    let fail = analysisShowLineArr.map(item => {
      if ((item.task.value === WELL_TYPE.NEG && (item.cq.value < data.quanlityControl?.negCq))
        || (item.task.value === WELL_TYPE.NTC && (item.cq.value < data.quanlityControl?.ntcCq))
        || (item.task.value === WELL_TYPE.POS && (item.cq.value > data.quanlityControl?.posCq || item.cq.value === "NA"))
        || (item.task.value === WELL_TYPE.STD && item.cq.value === "NA")
        || (item.task.value === WELL_TYPE.STD
          && (parseInt(item.quantityEfficiency.value) < data.quanlityControl?.efficiency.min
            || parseInt(item.quantityEfficiency.value) > data.quanlityControl?.efficiency.max
            || item.quantityEfficiency.value === "NA"))
        || (item.task.value === WELL_TYPE.STD && (item.r.value < data.quanlityControl?.stdCurveR2 || item.r.value === "NA"))
        || (item.cqSd.value > data.quanlityControl?.cqStdDev)
      ) {
        return item.row * 12 + item.col;
      }
    });
    setFail(fail);
  }, [data, analysisShowLineArr]);

  return (
    <section className={"qcTable"}>
      <div>
        <div/>
        <div>
          {
            WELLS_COLUMN.map(col => <div key={col}>{col}</div>)
          }
        </div>
      </div>
      <div>
        {
          WELLS_ROW.map(row => <div key={row}>{row}</div>)
        }
      </div>
      <div ref={wellsContainer}>
        {
          data.wells.map((well) => (
            <div style={{position: "relative"}} key={well.row * 12 + well.col}>
              {
                fail.includes(well.row * 12 + well.col)
                  ? <div className="failFlag"/>
                  : null
              }
            </div>
          ))
        }
      </div>
    </section>
  );
});